<template>
    <div class="app-container">
      <div class="filter-container">
        <div>
        <el-select
          v-model="listQuery.searchKey2"
          style="width: 200px"
          class="filter-item"
          placeholder="申报标题"
          @change="searchAndSort"
        >
          <el-option
            v-for="item in declareOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-input
          v-model="listQuery.searchKey1"
          placeholder="项目名称"
          style="width: 200px"
          class="filter-item"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchAndSort"
        >
          查找
        </el-button>
    </div>
        <div>
          <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
            导出 Excel
          </el-button>
        </div>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
      <el-table-column label="申报标题" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDeclareName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课题组" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectGroupName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDepartment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人电话" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="立项报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectAttachFileName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="当前处理" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">提交项目开题报告</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button
              v-if="row.projectApplicantId === id"
              size="mini"
              type="success"
              @click="$router.push(`/project/subject/report/${row.id}`)"
            >
              提交开题报告
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageIndex"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </template>

  <script>
  import { searchTwo } from "@/utils";
  import Pagination from "@/components/Pagination";
  import {fetchProjectMidCheckList, fetchProjectSubjectCheckList} from "@/api/project";
  import { checkPermission, checkProjectOwner } from '@/utils/permission'
  import {mapGetters} from "vuex";

  export default {
    name: "projectMidList",
    components: { Pagination },
    data() {
      return {
        tableKey: 0,
        totalList: null,
        list: null,
        total: 0,
        listLoading: false,
        downloadLoading: false,
        listQuery: {
          pageIndex: 1,
          limit: 10,
          searchField1: "projectName",
          searchKey1: "",
          searchField2: "projectDeclareName",
          searchKey2: "",
        },
        declareOptions: [],
      };
    },
    created() {
      this.getList();
    },

    computed: {
      ...mapGetters(["id", "name", "roles"])
    },
    methods: {
      checkPermission,
      checkProjectOwner,
      getList() {
        this.$store.dispatch('user/getUserInfo')
        this.listLoading = true;
        fetchProjectSubjectCheckList().then((res) => {
          this.totalList = res.data;
          this.getDeclareOptions();
          this.handleFilter();

          this.listLoading = false;
        });
      },
      handleFilter() {
        const result = searchTwo(this.totalList, this.listQuery);
        this.list = result.data;
        this.total = result.total;
      },
      getDeclareOptions() {
        const options = [];
        this.totalList.forEach(item => {
            options.push({key: item.projectDeclareName, label: item.projectDeclareName})
        });
        this.declareOptions = [...new Set(options)];
      },
      searchAndSort() {
        this.listQuery.pageIndex = 1;
        this.handleFilter();
      },
      handleDownload() {
      this.downloadLoading = true
      import('@/components/ExportExcel/Export2Excel').then(excel => {
        const tHeader = ['序号', '申报标题', '项目编号', '项目名称', '课题组', '负责人', '所属部门', '负责人电话', '项目状态'];
        const filterVal = ['id', 'projectDeclareName', 'projectId', 'projectName', 'projectGroupName', 'projectOwnerName', 'projectDepartment', 'projectOwnerPhone', 'projectStatus']
        const list = this.totalList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '项目列表',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .filter-container {
    display: flex;
    justify-content: space-between;
  }
  </style>
